<template>
    <div id="add_copyright">
        <div class="container">
            <el-form
                v-if="Object.keys(form).length > 0 || !this.$route.query.id"
                ref="form"
                :model="form"
                :rules="rules"
                label-width="140px"
            >
                <div class="wrapper">
                    <div style="display: inline-block" class="wrapper-left">
                        <el-form-item label="ID:" v-if="$route.query.id">
                            <el-input disabled class="w" v-model="form.id"></el-input>
                        </el-form-item>
                        <el-form-item label="全称:" prop="name">
                            <el-input class="w" v-model="form.name"></el-input>
                        </el-form-item>

                        <el-form-item label="简称:" prop="aliasName">
                            <el-input class="w" v-model="form.aliasName"></el-input>
                        </el-form-item>

                        <el-form-item label="外文名:">
                            <el-input class="w" v-model="form.nameEn"></el-input>
                        </el-form-item>

                        <el-form-item label="类型:" prop="type">
                            <el-select :clearable="true" v-model="form.type" placeholder="请选择类型" class="handle-select mr10 w">
                                <el-option key="1" label="个人" :value="1"></el-option>
                                <el-option key="2" label="社团" :value="2"></el-option>
                                <el-option key="3" label="事业单位" :value="3"></el-option>
                                <el-option key="4" label="法人单位" :value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item label="国籍:" prop="nationality">
                            <el-select :clearable="true" v-model="form.nationality" placeholder="请选择国籍" class="handle-select mr10 w">
                                <el-option v-for="(item, index) in countrys" :key="index" :label="item" value="0"></el-option>
                                
                            </el-select>
                        </el-form-item> -->

                        <el-form-item label="国籍：" prop="nationality">
                            <el-select
                                placeholder="请选择国籍"
                                :clearable="true"
                                filterable
                                class="handle-select mr10 w"
                                v-model="form.nationality"
                            >
                                <el-option-group v-for="group in countrys" :key="group.label" :label="group.label">
                                    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.label">
                                        <span style="float: left">{{ item.label }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="公司介绍:">
                            <el-input class="w" v-model="form.introduction"></el-input>
                        </el-form-item>

                        <el-form-item label="" class="corporate-info">
                            <p>法人信息</p>
                        </el-form-item>

                        <el-form-item label="法人代表:">
                            <el-input class="w" v-model="form.representative"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证:">
                            <el-input class="w" v-model="form.representativeId"></el-input>
                        </el-form-item>

                        <el-form-item label="手机:">
                            <el-input class="w" v-model="form.representativePhone"></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱:">
                            <el-input class="w" v-model="form.representativeEmail"></el-input>
                        </el-form-item>

                        <el-form-item label="" class="business-contact-method">
                            <p>业务联系人方式</p>
                        </el-form-item>

                        <el-form-item label="联系人:" prop="contact">
                            <el-input class="w" v-model="form.contact"></el-input>
                        </el-form-item>

                        <el-form-item label="座机:" prop="contactPhone">
                            <el-input class="w" v-model="form.contactPhone"></el-input>
                        </el-form-item>

                        <el-form-item label="手机:" prop="contactMobile">
                            <el-input class="w" v-model="form.contactMobile"></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱:" prop="contactEmail">
                            <el-input class="w" v-model="form.contactEmail"></el-input>
                        </el-form-item>

                        <el-form-item label="QQ:">
                            <el-input class="w" v-model="form.contactQq"></el-input>
                        </el-form-item>

                        <el-form-item label="微信号:">
                            <el-input class="w" v-model="form.contactWechat"></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block" class="wrapper-right">
                        <el-form-item label="营业执照号：">
                            <el-input class="w" clearable v-model="form.bizLicence"></el-input>
                        </el-form-item>

                        <el-form-item label="注册资本：">
                            <el-input class="w" clearable v-model="form.capital"></el-input>
                        </el-form-item>

                        <el-form-item label="注册地址：">
                            <el-input class="w" clearable v-model="form.regAddress"></el-input>
                        </el-form-item>

                        <el-form-item label="通信地址：">
                            <el-input class="w" clearable v-model="form.address"></el-input>
                        </el-form-item>

                        <el-form-item label="邮政编码：">
                            <el-input class="w" clearable v-model="form.zipcode"></el-input>
                        </el-form-item>

                        <el-form-item label="营业执照是否永久：">
                            <el-select :clearable="true" v-model="form.permanentFlag" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="合同起止日期：" prop="contractStartEndDate">
                            <div class="block w">
                                <el-date-picker
                                    class="w"
                                    v-model="form.contractStartEndDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                >
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="" class="bank-info">
                            <p>银行信息</p>
                        </el-form-item>

                        <el-form-item label="银行开户许可证号：">
                            <el-input class="w" clearable v-model="form.bankLicenceNo"></el-input>
                        </el-form-item>

                        <el-form-item label="开户名：">
                            <el-input class="w" clearable v-model="form.bankAccountName"></el-input>
                        </el-form-item>

                        <el-form-item label="开户账号：">
                            <el-input class="w" clearable v-model="form.bankAccountNo"></el-input>
                        </el-form-item>

                        <el-form-item label="开户银行：">
                            <el-input class="w" clearable v-model="form.bankName"></el-input>
                        </el-form-item>

                        <el-form-item label="" class="upload-file">
                            <p>上传文件</p>
                        </el-form-item>

                        <div class="upload-wrapper">
                            <div class="left">
                                <el-form-item label="上传营业执照：" prop="src1">
                                    <!-- <el-input class="w" clearable v-model="form.zhizhao"></el-input> -->
                                    <svg-icon v-if="!src1" data_iconName="u5735" className="u5735_icon" />
                                    <div class="u5735_icon" v-if="src1" v-on:mouseover="mouseoverImg1()" v-on:mouseout="mouseoutImg()">
                                        <img v-if="show1" @click="ImageChange1()" :src="src1" style="width: 100%; height: 100%" alt="" />
                                        <div
                                            v-if="!show1"
                                            :style="{
                                                position: 'fixed',
                                                left: 0,
                                                top: 0,
                                                width: '100vw',
                                                height: '100vh',
                                                'z-index': 99,
                                                background: 'rgba(0, 0, 0, 0.7)'
                                            }"
                                            @click="ImageChange1()"
                                        >
                                            <img
                                                :src="src1"
                                                :style="{
                                                    width: '500px',
                                                    height: '500px',
                                                    position: 'absolute',
                                                    left: '50%',
                                                    top: '50%',
                                                    transform: 'translate(-50%, -50%)'
                                                }"
                                                alt=""
                                            />
                                        </div>
                                        <div ref="imgDelete1" class="delete-img">
                                            <i class="el-icon-delete" style="background: #fff" @click="deleteImg1()"></i>
                                        </div>
                                    </div>

                                    <a href="javascript:void(0)" class="btn">
                                        上传文件
                                        <input ref="file" accept=".jpg,.png,.pdf" type="file" id="file" name="file" @change="uploadFile1" />
                                    </a>
                                </el-form-item>

                                <el-form-item label="上传银行信息：">
                                    <!-- <el-input class="w" clearable v-model="form.bankInfo"></el-input> -->
                                    <svg-icon v-if="!src2" data_iconName="u5735" className="u5735_icon" />
                                    <!-- <img :src="src2" v-if="src2" class="u5735_icon" alt="" /> -->
                                    <div class="u5735_icon" v-if="src2" v-on:mouseover="mouseoverImg2()" v-on:mouseout="mouseoutImg1()">
                                        <img v-if="show2" @click="ImageChange2()" :src="src2" style="width: 100%; height: 100%" alt="" />
                                        <div
                                            v-if="!show2"
                                            :style="{
                                                position: 'fixed',
                                                left: 0,
                                                top: 0,
                                                width: '100vw',
                                                height: '100vh',
                                                'z-index': 99,
                                                background: 'rgba(0, 0, 0, 0.7)'
                                            }"
                                            @click="ImageChange2()"
                                        >
                                            <img
                                                :src="src2"
                                                :style="{
                                                    width: '500px',
                                                    height: '500px',
                                                    position: 'absolute',
                                                    left: '50%',
                                                    top: '50%',
                                                    transform: 'translate(-50%, -50%)'
                                                }"
                                                alt=""
                                            />
                                        </div>
                                        <div ref="imgDelete2" class="delete-img">
                                            <i class="el-icon-delete" style="background: #fff" @click="deleteImg2()"></i>
                                        </div>
                                    </div>
                                    <a href="javascript:void(0)" class="btn">
                                        上传文件
                                        <input
                                            ref="file1"
                                            accept=".jpg,.png,.pdf"
                                            type="file"
                                            id="file"
                                            name="file"
                                            @change="uploadFile2"
                                        />
                                    </a>
                                </el-form-item>
                            </div>
                            <div class="right">
                                <pre>
    1，请确认营业执照已加盖公章，否则将审核
    不通过 
    2，根据国家相关规定，请提供有效身份的彩
    色照片/彩色扫描件
    3，图片需为jpg、png、pdf格式，且大小不
    能超过5M 
    4，海外请上传：商业登记照
    </pre
                                >
                            </div>
                        </div>

                        <el-form-item label="" class="status-manage" v-if="$route.query.id">
                            <p>状态管理</p>
                        </el-form-item>
                        <el-form-item label="状态：" v-if="$route.query.id">
                            <el-select :clearable="true" v-model="form.status" class="handle-select mr10 w">
                                <el-option
                                    :key="index"
                                    v-for="(item, index) in applyStatus"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-form>

            <el-row>
                <el-button @click="handleCancel">取消</el-button>
                <el-button
                    type="primary"
                    @click="handleSave"
                    :disabled="
                        checkRequire({
                            name: form.name,
                            type: form.type,
                            nationality: form.nationality,
                            contact: form.contact,
                            contactMobile: form.contactMobile,
                            contactEmail: form.contactEmail,
                            contractStartEndDate: form.contractStartEndDate,
                            src1: src1
                        })
                    "
                    >保存</el-button
                >
                <!-- zhizhao: form.zhizhao + '',
                            bankInfo: form.bankInfo + '' -->
            </el-row>
        </div>
    </div>
</template>

<script>
import { countrys } from '@/components/common/';
import { applyStatus } from '@/components/common/';
import { v4 as uuidv4 } from 'uuid';
import { mapGetters, mapMutations } from 'vuex';

export default {
    name: 'AddCopyright',
    computed: {
        ...mapGetters(['tagsList', 'cpManageQuery'])
    },
    data() {
        return {
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                type: [{ required: true, message: '请选择类型', trigger: 'change' }],
                nationality: [{ required: true, message: '请选择国籍', trigger: 'change' }],
                contact: [{ required: true, message: '请填写联系人', trigger: 'blur' }],
                contactMobile: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
                contactEmail: [{ required: true, message: '请填写邮箱', trigger: 'blur' }],
                // address: [{ required: true, message: '请填写通信地址', trigger: 'blur' }],
                // zipcode: [{ required: true, message: '请填写邮政编码', trigger: 'blur' }],
                contractStartEndDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
                src1: [{ required: true, message: '请上传营业执照', trigger: 'blur' }]
                // src2: [{ required: true, message: '请上传银行信息', trigger: 'blur' }]
            },
            show1: true,
            show2: true,
            countrys,
            applyStatus,
            form: {},
            baseUrl: process.env.VUE_APP_SRC2,
            src1: '',
            src2: ''
        };
    },
    // activated() {
    //     // 编辑查询
    //     if (this.$route.query.id) {
    //         this.getDataById(this.$route.query.id);
    //         this.getImg();
    //         this.src1 = `${this.baseUrl}/api/cpp/bizlicence?fileName=${this.$route.query.id}`;
    //         this.src2 = `${this.baseUrl}/api/cpp/demo?fileName=${this.$route.query.id}`;
    //     } else {
    //         this.src2 = this.src1 = '';
    //         this.form = {};
    //         this.$setActiveTag.call(this, '新增CP');
    //     }
    // },

    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler: function (a, b) {
                if (a.name === 'AddCopyright') {
                    // 编辑查询
                    if (this.$route.query.id) {
                        this.getDataById(this.$route.query.id);
                        this.getImg();
                        this.src1 = `${this.baseUrl}/api/cpp/bizlicence?fileName=${this.$route.query.id}`;
                        this.src2 = `${this.baseUrl}/api/cpp/demo?fileName=${this.$route.query.id}`;
                    } else {
                        this.src2 = this.src1 = '';
                        this.form = {};

                        this.$nextTick(() => {
                            this.$setActiveTag.call(this, '新增CP');
                        });
                    }
                }
            }
        }
    },
    methods: {
        ImageChange1() {
            this.show1 = !this.show1;
        },
        ImageChange2() {
            this.show2 = !this.show2;
        },
        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        ...mapMutations(['SET_TAGSLIST', 'SET_CPMANAGE_DATA', 'SET_CPMANAGE_PAGETOTAL', 'SET_CPMANAGE_QUERY']),
        getImg() {
            this.src1 = `${process.env.VUE_APP_SRC2}/api/cpp/bizlicence?fileName=${this.$route.query.id}&uuid=${uuidv4()}`;
            this.src2 = `${process.env.VUE_APP_SRC2}/api/cpp/demo?fileName=${this.$route.query.id}&uuid=${uuidv4()}`;
        },
        deleteImg1() {
            this.$confirm('是否删除该照片?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.src1 = '';
                    this.form.zhizhao = null;
                    this.$refs.imgDelete1.style.display = 'none';
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        deleteImg2() {
            this.$confirm('是否删除该照片?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.src2 = '';
                    this.form.bankInfo = null;
                    this.$refs.imgDelete2.style.display = 'none';
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        mouseoverImg1() {
            if (this.src1) {
                this.$refs.imgDelete1.style.display = 'block';
            } else {
                this.$refs.imgDelete1.style.display = 'none';
            }
        },
        mouseoverImg2() {
            if (this.src2) {
                this.$refs.imgDelete2.style.display = 'block';
            } else {
                this.$refs.imgDelete2.style.display = 'none';
            }
        },
        // 鼠标移出图片
        mouseoutImg() {
            this.$refs.imgDelete1.style.display = 'none';
        },
        mouseoutImg1() {
            this.$refs.imgDelete2.style.display = 'none';
        },

        async getDataById(cpid) {
            try {
                let url = '/cpp/detailed';
                let { data: res } = await this.$http[1].get(url, {
                    params: this.$removeField({
                        id: cpid
                    })
                });
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                console.log('CP编辑', res);
                // 取值、设置默认值
                let requiredFields = {
                    id: '',
                    name: '',
                    aliasName: '',
                    nameEn: '',
                    type: '',
                    nationality: '',
                    introduction: '',
                    representative: '',
                    representativeId: '',
                    representativePhone: '',
                    representativeEmail: '',
                    contact: '',
                    contactPhone: '',
                    contactMobile: '',
                    contactEmail: '',
                    contactQq: '',
                    contactWechat: '',
                    bizLicence: '',
                    capital: '',
                    regAddress: '',
                    address: '',
                    zipcode: '',
                    permanentFlag: '',
                    contractStart: '',
                    contractEnd: '',
                    bankLicenceNo: '',
                    bankAccountName: '',
                    bankAccountNo: '',
                    bankName: '',
                    status: '',
                    zhizhao: null,
                    bankInfo: null
                };
                var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);

                // 中间处理
                if (ret.contractStart) {
                    let contractStartEndDate = [
                        this.$timstampToStandardDate(ret.contractStart),
                        this.$timstampToStandardDate(ret.contractEnd)
                    ];
                    ret.contractStartEndDate = contractStartEndDate;
                } else {
                    ret.contractStartEndDate = [];
                }

                delete ret.contractStart, delete ret.contractEnd;

                // 赋值
                this.form = ret;
                this.$nextTick(() => {
                    this.$refs.imgDelete1.style.display = 'none';
                    this.$refs.imgDelete2.style.display = 'none';
                });

                this.$setActiveTag.call(this, this.form.name.trim());
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        rowClass({ row, rowIndex }) {
            return 'height: 26px;background-color:#409EFF !important;color:#fff; text-align: center;';
        },
        uploadFile1(e) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            console.dir(target);
            this.form.zhizhao = target.files[0];
            // target.value = null;

            let isLt5M = target.files[0].size / 1024 / 1024 <= 5;
            if (!isLt5M) {
                return this.$message.error('上传图片大小不能超过5MB!');
            }

            this.src1 = this.$getObjectURL(target.files[0]);
        },

        uploadFile2(e) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            console.dir(target);
            this.form.bankInfo = target.files[0];
            let isLt5M = target.files[0].size / 1024 / 1024 <= 5;
            if (!isLt5M) {
                return this.$message.error('上传图片大小不能超过5MB!');
            }
            // target.value = null;
            this.src2 = this.$getObjectURL(target.files[0]);
        },
        handleSave() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.save();
                })
                .catch(() => {});
        },
        async save() {
            try {
                if (this.$route.query.id) {
                    var url = '/cpp/update';
                } else {
                    var url = '/cpp/apply';
                }
                var formdata = new FormData();

                var obj = this.$removeField({
                    name: this.form.name,
                    aliasName: this.form.aliasName,
                    nameEn: this.form.nameEn,
                    nationality: this.form.nationality,
                    type: this.form.type,
                    introduction: this.form.introduction,
                    representative: this.form.representative,
                    representativeId: this.form.representativeId,
                    representativePhone: this.form.representativePhone,
                    representativeEmail: this.form.representativeEmail,
                    contact: this.form.contact,
                    contactPhone: this.form.contactPhone,
                    contactMobile: this.form.contactMobile,
                    contactEmail: this.form.contactEmail,
                    contactQq: this.form.contactQq,
                    bizLicence: this.form.bizLicence,
                    capital: this.form.capital,
                    regAddress: this.form.regAddress,
                    address: this.form.address,
                    zipcode: this.form.zipcode,
                    permanentFlag: this.form.permanentFlag,
                    contractStart: this.$dateFormat(this.$standardDateToTimstamp(this.form.contractStartEndDate[0]), '', '-'),
                    contractEnd: this.$dateFormat(this.$standardDateToTimstamp(this.form.contractStartEndDate[1]), '', '-'),
                    bankLicenceNo: this.form.bankLicenceNo,
                    bankAccountName: this.form.bankAccountName,
                    bankAccountNo: this.form.bankAccountNo,
                    bankName: this.form.bankName,
                    zhizhao: this.form.zhizhao,
                    bankInfo: this.form.bankInfo
                });
                for (let key in obj) {
                    formdata.append(key, obj[key]);
                }

                if (this.$route.query.id) {
                    formdata.append('id', (this.form.id + '').trim());
                    if (this.form.status) {
                        formdata.append('status', this.form.status);
                    } else {
                        // formdata.append('status', '');
                    }
                } else {
                    // formdata.append('status', '');
                }
                let { data: res } = await this.$http[1].post(url, formdata, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });
                console.log('响应数据', res);
                this.$refs.file.value = null;
                this.$refs.file1.value = null;
                // this.src1 = '';
                // this.src2 = '';

                this.$message.success({
                    message: res.message,
                    duration: 1500
                });

                // if (this.$route.query.id) {
                //     this.getDataById(this.$route.query.id);
                // }

                this.$closeActiveTag.call(this);

                this.SET_CPMANAGE_DATA([]);
                this.SET_CPMANAGE_PAGETOTAL(0);
                var tempQuery = { ...this.cpManageQuery };
                this.SET_CPMANAGE_QUERY(tempQuery);
                this.$router.replace({
                    path: '/cp/manage'
                });
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleCancel() {
            // this.display('none');
            this.$closeActiveTag.call(this);
            this.$router.replace({
                path: '/cp/manage'
            });
        }
        // display(a) {
        //     this.$nextTick(() => {
        //         document.querySelector('.wrapper .content-box .tags ul .tags-li.active').style.display = a;
        //     });
        // }
    }
};
</script>

<style lang="scss">
#add_copyright {
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 185px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        // width: 470px !important;
        width: 100% !important;
    }

    .wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-template-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-justify-content: center;
        justify-content: center;
        -ms-justify-items: center;
        justify-items: center;
        -ms-grid-auto-flow: row;
        grid-auto-flow: row;
        -ms-align-items: flex-start;
        align-items: flex-start;
        -ms-align-content: flex-start;
        align-content: flex-start;
        .wrapper-left {
            width: 90%;
        }
        .wrapper-right {
            width: 90%;
            .el-form-item {
                &:first-of-type {
                    .el-form-item__content {
                    }
                }
            }
        }
    }
    .corporate-info,
    .business-contact-method,
    .bank-info,
    .upload-file,
    .status-manage {
        margin-top: 50px;
        .el-form-item__content {
            margin-left: 60px !important;
            p {
                width: 150px;
                height: 30px;
                line-height: 30px;
                background-color: rgba(0, 0, 0, 0.1);
                text-align: center;
                color: #333;
            }
        }
    }

    .el-row {
        // padding-left: 10%;
        text-align: right;
        margin-right: 2.5%;
    }
    .upload-wrapper {
        display: flex;
        justify-content: space-between;
        .right {
            font-size: 12px;
            color: #666;
        }
        .left {
            .el-form-item {
                .el-form-item__content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-left: 0 !important;
                    width: 200px;
                }
                display: flex;
                align-items: center;
            }
            .u5735_icon {
                width: 30px;
                height: 39px;
                vertical-align: middle;
                position: relative;
                .delete-img {
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 15px;
                    line-height: 15px;
                    text-align: right;
                    background: rgba(59, 60, 61, 0.3);
                    bottom: 0px;
                    cursor: pointer;
                }
            }
            .btn {
                position: relative;
                display: inline-block;
                text-align: center;
                color: #fff;
                text-decoration: none;
                width: 80px;
                height: 32px;
                line-height: 32px;
                background: #409eff;
                border-radius: 3px;
                font-size: 12px;
                vertical-align: middle;
                margin-left: 40px;
            }
            input[name='file'] {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
            }
        }
    }
}
</style>
